<template>
  <a-card :bordered="false" :title="$route.meta.title" :bodyStyle="{ padding: '0 12px' }">
    <a-table rowKey="id" size="middle" :loading="loading" :columns="columns" :dataSource="dataSource" :pagination="pagination" @change="tableChange">
      <a-form slot="title" :form="searchForm" @submit="searchSubmit" layout="inline">
        <a-form-item label="充值编号">
          <a-input allowClear :maxLength="20" autocomplete="off" placeholder="请输入充值编号" v-decorator="['orderNo']" />
        </a-form-item>
        <a-form-item label="用户姓名">
          <a-input allowClear :maxLength="8" autocomplete="off" placeholder="请输入用户姓名" v-decorator="['userName']" />
        </a-form-item>
        <a-form-item label="用户手机">
          <a-input allowClear :maxLength="11" autocomplete="off" placeholder="请输入手机号" v-decorator="['userPhone']" />
        </a-form-item>
        <sjht-search-submit hide-reset />
      </a-form>
      <span slot="price" slot-scope="text" class="sjht-price" v-if="text >= 0">{{ text }}</span>
    </a-table>
  </a-card>
</template>
<script>
import { table, searchForm } from '../../utils/mixins'
import { RechargePageList } from '../../api/user'
export default {
  name: 'RechargeList',
  mixins: [table, searchForm],
  data() {
    return {
      loadApi: RechargePageList,
      columns: [
        { title: 'ID', dataIndex: 'id', width: 60 },
        { title: '充值编号', dataIndex: 'rechargeNo', width: 170 },
        { title: '用户编号', dataIndex: 'user.code', width: 100 },
        { title: '用户姓名', dataIndex: 'user.name', width: 100 },
        { title: '用户手机', dataIndex: 'user.phone', width: 100 },
        { title: '充值金额', dataIndex: 'price', width: 75, align: 'center', scopedSlots: { customRender: 'price' } },
        { title: '充值方式', dataIndex: 'mode', width: 100, align: 'center' },
        { title: '创建时间', dataIndex: 'createTime', width: 145 },
        { title: '更新时间', dataIndex: 'updateTime' }
      ]
    }
  },
  mounted() {
    this.loadData()
  }
}
</script>